
const navbarController = function($state, AuthService, LanguageService, $translate) {
  'ngInject';

  const vm = this;

  vm.navItems = [
    { state: 'app.home', label: 'HOME', icon: 'fas fa-home' },
    { state: 'app.todos', label: 'MY_TODOS', icon: 'fas fa-list' },
    { state: 'app.ticketCreate', label: 'CREATE_TICKET', icon: 'fas fa-plus' },
    { state: 'app.ticketQuery', label: 'QUERY_TICKET', icon: 'fas fa-search' },
    { state: 'app.userManagement', label: 'USER_MANAGEMENT', icon: 'fas fa-users', roles: ['administrator', 'support'] },
    { state: 'app.settings', label: 'SETTINGS', icon: 'fas fa-cog' }
  ];

  vm.isActive = (state) => {
    return $state.includes(state);
  };

  vm.getCurrentUser = () => {
    return AuthService.getCurrentUser();
  };

  vm.logout = () => {
    AuthService.logout();
    $state.go('login');
  };

  vm.showUserDropdown = false;

  vm.toggleUserDropdown = () => {
    vm.showUserDropdown = !vm.showUserDropdown;
  };

  vm.hasRole = (requiredRoles) => {
    const user = AuthService.getCurrentUser();
    if (!user || !requiredRoles) return true;
    return requiredRoles.includes(user.role);
  };

  // 语言切换相关方法
  vm.getCurrentLanguage = () => {
    return LanguageService.getCurrentLanguage();
  };

  vm.getCurrentLanguageInfo = () => {
    return LanguageService.getCurrentLanguageInfo();
  };

  vm.getSupportedLanguages = () => {
    return LanguageService.getSupportedLanguages();
  };

  vm.changeLanguage = (languageCode) => {
    LanguageService.changeLanguage(languageCode);
  };

  vm.showLanguageDropdown = false;

  vm.toggleLanguageDropdown = () => {
    vm.showLanguageDropdown = !vm.showLanguageDropdown;
  };
};

const navbarComponent = {
  template: `
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container">
        <a class="navbar-brand" ui-sref="app.home">{{ 'SYSTEM_NAME' | translate }}</a>
        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <li class="nav-item" ng-repeat="item in $ctrl.navItems" ng-if="$ctrl.hasRole(item.roles)">
              <a class="nav-link" 
                 ui-sref="{{ item.state }}"
                 ng-class="{ active: $ctrl.isActive(item.state) }">
                <i class="{{ item.icon }}"></i>
                {{ item.label | translate }}
              </a>
            </li>
          </ul>
          
          <ul class="navbar-nav">
            <!-- 语言切换下拉菜单 -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button"
                 ng-click="$ctrl.toggleLanguageDropdown()" 
                 aria-expanded="false">
                <i class="fas fa-globe me-2"></i>{{ $ctrl.getCurrentLanguageInfo().flag }}
                <span class="d-none d-md-inline ms-1">{{ $ctrl.getCurrentLanguageInfo().name }}</span>
              </a>
              <div class="dropdown-menu dropdown-menu-end" 
                   ng-class="{ show: $ctrl.showLanguageDropdown }">
                <h6 class="dropdown-header">{{ 'SWITCH_LANGUAGE' | translate }}</h6>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" 
                   href="#" 
                   ng-repeat="lang in $ctrl.getSupportedLanguages()"
                   ng-click="$ctrl.changeLanguage(lang.code)"
                   ng-class="{ active: lang.code === $ctrl.getCurrentLanguage() }">
                  <span class="me-2">{{ lang.flag }}</span>
                  {{ lang.name }}
                  <i class="fas fa-check ms-2" ng-if="lang.code === $ctrl.getCurrentLanguage()"></i>
                </a>
              </div>
            </li>
            
            <!-- 用户下拉菜单 -->
            <li class="nav-item dropdown" ng-if="$ctrl.getCurrentUser()">
              <a class="nav-link dropdown-toggle" href="#" role="button"
                 ng-click="$ctrl.toggleUserDropdown()" 
                 aria-expanded="false">
                <i class="fas fa-user-circle me-2"></i>{{ $ctrl.getCurrentUser().name }}
              </a>
              <div class="dropdown-menu dropdown-menu-end" 
                   ng-class="{ show: $ctrl.showUserDropdown }">
                <div class="dropdown-header">
                  <strong>{{ $ctrl.getCurrentUser().name }}</strong><br>
                  <small class="text-muted">{{ $ctrl.getCurrentUser().role }}</small>
                </div>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" ui-sref="app.settings">
                  <i class="fas fa-cog me-2"></i>{{ 'PERSONAL_SETTINGS' | translate }}
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item text-danger" href="#" ng-click="$ctrl.logout()">
                  <i class="fas fa-sign-out-alt me-2"></i>{{ 'LOGOUT' | translate }}
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  `,
  controller: navbarController
};

function initNavbarComponent() {
  const angular = window.angular;
  
  if (!angular) {
    console.error('Angular 未找到，无法初始化导航栏组件模块');
    return;
  }

  angular.module('app.components.navbar', [])
    .component('appNavbar', navbarComponent);
}

// Listen for vendor libs loaded event
window.addEventListener('vendorLibsLoaded', () => {
  initNavbarComponent();
});

// If Angular already loaded, init directly  
if (window.angular) {
  initNavbarComponent();
}